<script>
import { defineComponent } from "vue";
import { goodList, bianji, addList } from "@/api/pro";
// import { Search} from "@element-plus/icons-vue";
export default defineComponent({
    data() {
        return {
            queryInfo: {
                query: '',
                pagenum: 1,
                pagesize: 12,
                pics: ''
            },
            // 商品数量
            goodlistData: [],
            total: 0,
            listtotal: 0,
            drawer: false,
            drawer2: false,

            // 编辑提交商品
            bianjishanginfo: {
                id: '',
                goods_name: '',
                goods_price: '',
                goods_number: '',
                goods_weight: '',

            },
            // 编辑数据
            bianjishang: [],

            // 添加
            addinfo: {
                id: '',
                goods_name: '',
                goods_price: '',
                goods_number: '',
                goods_weight: '',
                goods_cat: '1'

            },


        }
    },
    mounted() {
        this.getList();

    },
    methods: {
        getList() {
            goodList(this.queryInfo).then((res) => {
                this.listtotal = res.data.data.total
                this.goodlistData = res.data.data.goods;
                if (res.data.meta.status !== "200") {
                    return ElMessage.success(res.data.meta.msg);
                }
                ElMessage.error(res.data.meta.msg)

            })
        },
        totalClick(num) {
            this.queryInfo.pagenum = num
            this.getList()
        },

        // 搜索
        searchs() {
            this.getList()

        },


        bianjibut(scope) {
            this.drawer = true

            let data = {
                id: scope.goods_id,
                goods_name: scope.goods_name,

                goods_price: scope.goods_price,
                goods_number: scope.goods_number,
                goods_weight: scope.goods_weight,
                goods_cat: '1',
            }
            this.bianjishanginfo = data
            console.log(data);


        },

        bianjitijiao() {
            bianji(this.bianjishanginfo).then((res) => {

                this.drawer = false;
                this.getList();

            })
        },

        // 删除商品  没接口暂时不写啦

        // 添加商品

        adddr() {
            this.drawer2 = true

        }
        ,
        add2() {
            addList(this.addinfo).then((res) => {
                console.log(res);
            })
        }

        // 时间
        , formatTime(row, column) {
            const date = new Date(row[column.property] * 1000)
            let year = date.getFullYear()//获取年
            let month = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);//月
            let day = date.getDate();
            let hours = date.getHours();
            let minutes = date.getMinutes();
            return year + '年' + month + '月' + day + '日' + hours + ':' + minutes
        }

    },

})
</script>

<template>
    <div>
        <div class="hedader">
            <el-row :gutter="20">
                <el-col :span="8">
                    <!-- 搜索与添加区域 -->
                    <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable class="el1">
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="searchs">查询商品</el-button>
                    <el-button type="primary" style="margin-left: 16px" @click="adddr">
                        添加商品
                    </el-button>
                    <el-drawer v-model="drawer2" title="I am the title" :with-header="false">
                        <span>商品添加</span>
                        <p>商品名称 <el-input v-model="this.addinfo.goods_name" placeholder="请输入商品名称" clearable /></p>
                        <p>商品价格: <el-input v-model="this.addinfo.goods_price" placeholder="请输入商品价格" clearable /></p>
                        <p>商品重量: <el-input v-model="this.addinfo.goods_number" placeholder="请输入商品数量" clearable /></p>
                        <p>商品重量: <el-input v-model="this.addinfo.goods_weight" placeholder="请输入商品重量" clearable /></p>
                        <el-button style="margin-top: 12px" @click="add2">添加</el-button>
                    </el-drawer>
                </el-col>
            </el-row>
        </div>
        <el-table :data="goodlistData" style="width: 100%">
            <el-table-column type="index" width="80" />
            <el-table-column prop="goods_name" label="商品名称" width="180" />
            <el-table-column prop="goods_price" label="商品价格" width="180" />
            <el-table-column prop="goods_weight" label="商品重量" />
            <el-table-column prop="add_time" label="创建时间" :formatter="formatTime" />
            <el-table-column fixed="right" label="操作" width="300">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="bianjibut(scope.row)">编辑
                    </el-button>
                    <el-button link type="success" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination background layout="prev, pager, next" :total="this.listtotal" v-model:pagenum="pagenum"
            v-model:pagesize="pagesize" @current-change="totalClick" />
        <!-- 编辑 -->
        <el-drawer v-model="drawer" title="I am the title" :with-header="false" width="600">

            <p>商品名称 <el-input v-model="this.bianjishanginfo.goods_name" placeholder="请输入商品名称" clearable /></p>
            <p>商品价格: <el-input v-model="this.bianjishanginfo.goods_price" placeholder="请输入商品价格" clearable /></p>
            <p>商品重量: <el-input v-model="this.bianjishanginfo.goods_weight" placeholder="请输入商品重量" clearable /></p>
            <el-button style="margin-top: 12px" @click="bianjitijiao">编辑</el-button>
        </el-drawer>
    </div>
</template>

<style lang="scss" scoped>
.el1 {
    width: 380px;
    margin-bottom: 20px;

}

.el-pagination {
    margin-top: 20px;

}

.el-col el-col-8 is-guttered {
    width: 300px;
}
</style>

